import React, { Component } from 'react'
import { Card, Button, message, Row, Col, Input, Form, Select, Space, DatePicker, Table, Tag, Tabs, Badge, Modal,Breadcrumb } from 'antd';
import locale from 'antd/lib/date-picker/locale/zh_CN';
import '../../assets/style/order/orderList.scss';
// import { ClockCircleOutlined } from '@ant-design/icons';
// TODO 退款功能，录入快递单号的完成
const data = [
  {
    key: '1',
    firstName: 'John',
    lastName: 'Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    firstName: 'Jim',
    lastName: 'Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    firstName: 'Joe',
    lastName: 'Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
];
export default class orderList extends Component {
  constructor() {
    super()
    this.state = {
      visible: false,
      inputValue:''
    }
  }
  search = (value) => {
    console.log(value)
    message.success("查询成功")   
  }
  // 点击id处理程序
  onIdClick = (value) => {
    console.log(value);
    this.props.history.push("/home/orderDetai")
    message.success("啊！我被点击了")
  }
  // 录入快递单处理程序
  enter = (e) => {
    console.log(e)
  }
  sendMesage = (val) => {
    console.log(val)
    this.props.history.push("/home/orderDetai")
  }
  showModal = (val) => {
    console.log(val);
    this.setState({
      visible: true,
    });
  };
  handleOk = e => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };

  handleCancel = e => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };
  // 快递单
  change = (e) => {
    this.setState({
      inputValue: e.target.value
    })  
    console.log(this.state.inputValue)
  }
  render() {
    return (
      <div>
        <Breadcrumb style={{ margin: '16px 0' }}>
          <Breadcrumb.Item>Home</Breadcrumb.Item>
          <Breadcrumb.Item>订单管理</Breadcrumb.Item>
        </Breadcrumb>
        <Card title="订单管理" bordered={false} className={"card"}>
          <h1 className={"dataTile"}>订单数据</h1>
          <Row className={"orderData"}>
            <Col span={6} className="dataItem">
              <Col className={"itemContent"}>
                <p>今日订单总额 <span className={"right"}>￥100元</span></p>
                <p>本周订单总额 <span className={"right"}>￥200元</span></p>
                <p>本月订单总额 <span className={"right"}>￥300元</span></p>
                <p>历史订单总额 <span className={"right"}>￥10000元</span></p>
              </Col>

            </Col>
            <Col span={6} className="dataItem">
              <Col className={"itemContent"}>
                <p>今日新的订单数量 <span className={"right"}>10 个</span></p>
                <p>本周新订单票张数 <span className={"right"}>20 个</span></p>
                <p>本月新订单票张数 <span className={"right"}>40 个</span></p>
                <p>历史新订单票张数 <span className={"right"}>100个</span></p>
              </Col>
            </Col>
            <Col span={6} className="dataItem">
              <Col className={"itemContent"}>
                <p>今日有效订单数 <span className={"right"}>10 个</span></p>
                <p>本周有效订单数 <span className={"right"}>40 个</span></p>
                <p>本月有效订单数 <span className={"right"}>100 个</span></p>
                <p>历史有效订单数 <span className={"right"}>1000 个</span></p>
              </Col>

            </Col>
            <Col span={6} className="dataItem">
              <Col className={"itemContent"}>
                <p>今日退货订单总数 <span className={"right"}>0个</span></p>
                <p>本周退货订单总数 <span className={"right"}>1个</span></p>
                <p>本月退货订单总数 <span className={"right"}>3个</span></p>
                <p>历史退货订单总数 <span className={"right"}>10个</span></p>
              </Col>
            </Col>
          </Row>
        </Card>
        {/* 订单筛选 */}
        <Card bordered={false} className={"searchBox"}>
          <Form onFinish={this.search}>
            <Row span={24}>
              <Col span={8}>
                <Form.Item name="orderId" label="订单Id">
                  <Row>
                    <Input placeholder="" />
                  </Row>
                </Form.Item>
                <Form.Item name="orderCome" label="渠道订单Id">
                  <Row>
                    <Input placeholder="" />
                  </Row>
                </Form.Item>
                <Form.Item name="orderType" label="订单类型">
                  <Row>
                    <Select
                      placeholder="选择订单类型"
                      onChange={this.onGenderChange}
                      allowClear
                      style={{ width: 200 }}
                    >
                      <Select.Option value="male">male</Select.Option>
                      <Select.Option value="female">female</Select.Option>
                      <Select.Option value="other">other</Select.Option>
                    </Select>
                  </Row>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item name="orderState" label="订单状态">
                  <Row>
                    <Select
                      placeholder="选择订单状态"
                      onChange={this.onGenderChange}
                      allowClear
                      style={{ width: 200 }}
                    >
                      <Select.Option value="male">已付款</Select.Option>
                    </Select>
                  </Row>
                </Form.Item>
                <Form.Item name="goodsName" label="商品名称">
                  <Row>
                    <Input placeholder="" />
                  </Row>
                </Form.Item>
                <Form.Item name="receiver" label="收货人姓名">
                  <Row>
                    <Input placeholder="" />
                  </Row>
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item name="orderPayTime" label="支付时间">
                  <Row>
                    <Space direction="vertical" size={12}>
                      <DatePicker locale={locale} />
                    </Space>
                  </Row>
                </Form.Item>
                <Form.Item name="receiveType" label="寄送类型">
                  <Row>
                    <Select
                      placeholder="选择寄送类型"
                      onChange={this.onGenderChange}
                      allowClear
                      style={{ width: 200 }}
                    >
                      <Select.Option value="male">1</Select.Option>
                    </Select>
                  </Row>
                </Form.Item>
                <Form.Item name="orderUserphone" label="收货人手机">
                  <Row>
                    <Input placeholder="" />
                  </Row>
                </Form.Item>
              </Col>
            </Row>
            <Form.Item>
              <Button type="primary" htmlType="submit" className={"searchBtm"}>查询</Button>
              <Button type="primary" className={"exportBtn"}>导出订单</Button>
            </Form.Item>
          </Form>

        </Card>
        {/* 订单列表部分 */}
        <Card className={"orderList"}>
          <h1>订单列表</h1>
          <Tabs defaultActiveKey="1">
            <Tabs.TabPane tab="全部" key="1">
              <Table dataSource={data} bordered >
                <Table.Column title="订单ID" dataIndex="firstName" key="firstName" render={(text,val) => (
                  <Button type="link" onClick={()=>this.onIdClick(val)}>{text}</Button>
                )
                }/>
                <Table.Column title="商品名称" dataIndex="lastName" key="lastName" />
                <Table.Column title="收货人姓名" dataIndex="age" key="age" />
                <Table.Column title="收货人手机" dataIndex="address" key="address" />
                <Table.Column title="寄送类型" dataIndex="address" key="address" />
                <Table.Column title="支付时间" dataIndex="address" key="address" />
                <Table.Column
                  title="操作"
                  key="action"
                  render={(text, record) => (
                    <Space size="middle">
                      <Tag color="green" onClick={()=>this.showModal(record)}>录入快递单号</Tag>
                    </Space>
                  )}
                />
              </Table>
            </Tabs.TabPane>
            <Tabs.TabPane tab={<Badge count={5} offset={[10, 0]}>待回复</Badge>} key="2">
              <Table dataSource={data} bordered>
                <Table.Column title="订单ID" dataIndex="firstName" key="firstName" />
                <Table.Column title="商品名称" dataIndex="lastName" key="lastName" />
                <Table.Column title="收货人姓名" dataIndex="age" key="age" />
                <Table.Column title="收货人手机" dataIndex="address" key="address" />
                <Table.Column title="寄送类型" dataIndex="address" key="address" />
                <Table.Column title="支付时间" dataIndex="address" key="address" />
                <Table.Column
                  title="操作"
                  key="action"
                  render={(text, record) => (
                    <Space size="middle">
                      <Tag color="green" onClick={() => this.showModal(record)}>录入快递单号</Tag>
                      <Tag color="green" onClick={() => (
                        this.sendMesage(record)
                      )}>回复留言</Tag>
                    </Space>
                  )}
                />
              </Table>
            </Tabs.TabPane>
          </Tabs>
        </Card>
        <Modal
          title="录入快递单"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <Form>
            <Form.Item label="快递单">
              <Input value={this.state.inputValue} onChange={this.change}></Input>
            </Form.Item>
          </Form>
        </Modal>
      </div>
    )
  }
}
